Membahas tentang text fild 
Tempat kita mengetik biasa untuk sebuah form untuk mengetik email password dll 
Buat satu text fild 
Body: Center ( 
mainAxisAlignment: MainAxisAlignment.center, 
children: [ 
textField(), 
[ 
(), kita akan membahas design dahulu 
Text field mempunyai property 
Jadi dicolumn kita kasih padding : const Edgelsert.all(40.0), 
Ini maka bisa diketik 
Ini Namanya sebuah text field 
Kita bisa decoration text filed mengunakan 
Decoration: yg membutuhkan inputDecoration() 
(disini banyak property 
Harus nyam au resove mengunakan const pada textfield seharusnya tapi 
Di probrem bisa dihilangkan dgn cara klik pilin for this line 
Maka sudah hilang 
Maka sudah ada textfield 
Lalu kita input decoration () kita mendesain textfild nya 
Ada property border: border ini untuk garis kasih 
OutlinelnputBorder(), //jika tidak mau gini border jgn diisi Cuma garis bawah aja 
Kemudia ada property 
Hinttext: ini tipenya string kita buar “Username”, maka ada telihat tapi di ketik 
hilang 
Ada Namanya 
labelText: ini juga memerlukan string “Username”, mka ada tulisan diatas 
dan kemudian ada 
labelStyle: bisa diubah label gunakan style jika mau atau tidak 
ada juga 
prefix: memerlukan sebuah widget Text(“username: ”) ,maka bisa menghilangkan 
hinttext nya 
ini sebuah taruh didepan field ada juga Namanya 
suffix: ini taruh di akhir Text(“Username”), 
biasa nya digunakan yg Namanya frefix icon dia membuthkan sebuah icon 
biasa nya mengunakan widget icon 
misal 
prefixlcon: icon(icons.people) ,maka ada iconya kita bisa komen labelnya 
jadi prefixlcon sama prefix sebelum nya tapi ini untuk icon 
dan ada juga 
suffixlcon: icon(icons.lock), ini untuk suffix icon 
ini membahas dgn design mengunakan InputDecoration 


setelah lain itu kita bisa mengkasih yg Namanya 
diluar decoration di textfield ada Namanya 
maxLines: 2, maka dia bisa 2 baris maxsimal 2 baris 


kemudian bisa kasih 

MaxLength: 10 ,ini adalah jumlah karakter 

Komen maxLinersnya 

Dan ada juga 

Keyboardtype: textinputType. Disini ada banyak coba kasih number 
.number dia otomatis harus memasukan angka tidak bisa huruf 
Dan kemudian .email maka form ini khusus email maka @ nya 
Dan bisa kasih .phone sama dgn number tapi ada + nya 

Jadi kita bisa menyuasaikan textfield ini untuk apa 

Ini adalah mengunakan property keyboardtype 

Dan ada juga 

Obscuretext: ini untuk password default nya false jika kasih true 
Maka dia berubah menjadi bintang biasa untuk password 

Kita sudah mencoba membuat sebuah textfield 

Kemudian kita membahas controller nya 

Maka komentari yg tadi 


Kita akan menampilkan sebuah nama di children 

textField sebelumnya komentar juga 

Text( “Nama Lengkap”), akan menampilkan nama berdasarkan diketik ini 
Lalu diatasnya kasih 

SizeBox: ( 

Height: 30, agar mempunyai jarak 

) 

Maka sudah ada 

Kita membuat 2 

Buat textField( 

Disini membuat 

Controller: ,ini adalah pengatur textfield 

Jadi kasih tau sepeti apa 

Buat dahulu variable 

Yg Namanya bisa pakai var 

Var namaDepan = TextEditingControler(): 

Jadi kita membuat controller dia meminta TextEditingControler maka sudah dibuat 
Saya biasa mengantikan var mengunakan TextEditingControler 
Kemudain kita isi dgn namaDepan 

Jadi controller TextField ini untuk namaDepan 

Kita kasih decoration( 

Hinttext: “nama Depan", 

) 

Maka sudah mempunyai nama depan 

Ingn kita mengunakan stateful agar kita bisa mengubah namaDepan 
Kemudian kita akan ganti text nya ganti Text(“$namaDepan”) 

Maka dilihat eror yg tidak diaharapkan 

Jadi varibel yg dibuat untuk mengambil inputan dari sini menungnakan text 
Maka tidak bisa gunakan 4) kurung awal 

Text(“$(namaDepan.text)”) ini mengambil Ketika value dari textfield 


Disini Namanya hilang karna belum diketik 
Kita buat statefull kita bisa gunakan setstate() 
Cara gunakan taruh di 
Textfield onChanged: (value)4 print(value) 3, ini membutuhkan sebuah function 
string 
Tulis value aja jadi value ini kita print 
Kita ketik apa aja maka keluar di terminal 
Jadi value apay g ketik 
Kita ganti jadi tetap menulis 
setState/(()4 
namaDepan.text, maka kita pembarui textnya 
}, 


Kita ketik maka nama depan sudah sesuai yg kita ketik 


Sekarang buat nama belakang 

Buar variable kayak tadi namaBelakang 

Buat textField yg ke 2 copy saja 

Controller ganti namaBelakang 

Kemudian Text diakhir kasih 

Maka kita buat lagi 

${namaBelakang.text}”) 

Maka kita ketik nama depan dan belakang maka sudah bisa 


Kita sudah buat controller textfield 

Dan sudah desain masih dasar 

Sudah mengabungkan textfield 1 dan 2 
Sudah membuat ochange 

Sudah buat variable TextEditingControler 
Kita bisa coba2 textfiled yg lain 


Pada kali membhas mengenai dialaog 

Jadi dialog di fluter bukan pembicaraan 

Jadi dialog sepeti sebuah alert yg bisa memberikan action 

Ketika menghapus data pasti timbul seperti alert yg bisa komfirmasi yaitu yes atau 
no 

Nanti ada pertanyaan menghapus sebuah data 


Misal 
Apakah anda menghapus data ini 
Yes atau no 


Itu adalah sebuah dialaog 

Kemudian sudah membuat 

Text 

Body: Center 

Child: text(“noting”, style: textStyle(fonsize: 40)) 
), 


Disini juga sudah membuat 

Di scaffold 

floatingActionButton: FloatingActionButton( 
onPressed: () f4, 

child: Icon(Icons.add), 

h 


Sebelum itu biasakan kita membuat aplikasi pisahkan home ini dgn widget baru 
Kita buat widget baru buat home ini 
Scaffold refactor exrat widget kasih Home 
Maka dia berpisah 
Maka disini home nya memakai widget Home 
Jadi sepeti ini biasakan membuat aplikasi dipisahkan antara home dan material 
Untuk aplikasi nya 
Ketika klik tombol floatingAction maka akan menampilkan alert dialog 
Caranya 
onPressed() { jika diklik maka 
showDialog( membutuhkan 2 parameter 
1 context ambil dari context kedua builder: () kita isi dgn (context) (maka dia 
menreturn 
{return AlertDialog()1 
AlertDialog() banyak propertinya 
Kasih title: text( “Title” ), 
Kita restart dahulu 
Ketika di klik maka muncul tapi ini hanya title saja 
Misal title ganti ubah data 
Kemudian ada 
Content: dia bentuknya widget Text( “Apakah ingin mengubah data”), 
Ini membuat aplikasi yes dan no Ketika tekan yes akan muncul data di ubah 
Jadi nothing ini beubah data diubah 
Buat dahulu data nya 
String data = “Nothing”: 
Maka Nothing ganti dgn data 
Kita ingin mengubah sebuah text 
Maka stateless ganti statefull 
Maka sudah membuat statefull 
Maka kita Kembali dgn alert nya 
Disini kita tambah sebuah action 
Action: I 
textButton() sama elevatedButton tapi hanya berupa text 
onPressed: () (4), 
child: text(“no), 
yg kedua kasih elevated button 
copy textbotton ganti elevated dan ubah yes 
] 
Maka sudah ada 2 tombol yes dan no 
Ketika tekan yes maka data berubah 


Disini ada tombol onPressed: (){} textButton No 
Ini kan Ketika tombol no sama yes ditekan tidak menghilang 
Dia menghilang Ketika di luar dialog 
Saya ingin Ketika ditekan tombol keluar dulu 
Kita lihat show dialog membutuhkan builder 
Builder akan menambah lapisan kita sudah membelajar navigator 
Maka builder itu nenambh lapisan 
Untuk menghilangkan dialog nya kita membuthkan navigator 
Navigator.of(context).pop/(): 
Sebelumnya kita memakai 
Navigator.pop(context): maka sama saja 
Untuk dialog ini memakai yg ini memkai yg of harus pakai ini 
Kenapa tidak pakai of tidak bisa mengembalikan sebuah data 
Pop untuk menarik sebuah halaman lapisan keluar maka 
Bisa jika tombol no ditekan keluar 
Nah maka tombol no dialog hilang 
Kemudian menambahkan lapisn 
Ini masih no doang kita igin dia bekerja dgn 
Yes juga 
Navigator.of(context).pop 
Bisa juga pakai tanpa of juga bisa 
Jadi untuk data belakangan 
Jadi kita pakai yg of dulu 
Kalau kita lihat showDialog maka bentuknya future dia kembalikan sebuah data 
Jadi di show dialog akhir 
Bisa tambhakn then karna dia future 
.then((value) => (value): 
Maka dia print valuenya 
Jadi jalankan value itu apa kita restart dahulu 
Ketika tekan no dan yes maka hasilnya null 
Kenapa null data ini kita ambil dari pengembalikan .pop 
Pop ini kita kasih (“Data”): 
Ini tekan no 
Maka ada Data 
Value itu dari pop of 
Jika pakai tanpa of (context, “Data berhasil diubah”): 
Maka sama 
Ini future nya diambil dari pop 
Jadi Ketika diklik yes data akan berubah 
Maka di then ganti {} 
Data = value: 
Jgn lupa kasih setstatel(() { 
Taruh disini 
H; 
Biar dia bisa berubah 
Ketika tekan yess maka data nya berubah menjadi data di ubah 
Kita restart 


Maka data berhasil diubah 

Kalau no menjadi null 

Tapi jgn sampai null 

No buat kosong () 

Ini bisa expore lagi masih banyak property lagi 
Di alertDialog 

Hanya ini saja berikutnya belajar responsive 


Membhas tentang responsive dan adaftif 

Ketika membuat aplikasi tentunya aplikasi nya berjalan lancar semua ukuran hp 
Maka kita membutuhkan responsive 

Untuk adaptif kita hanya memakai android maka bisa menampilkan untuk android 
Disini sudah membuat desainya 


Responsive 


Disini sudah ada container nya full 

Kemudian ditngah ada android karena Ketika jalankan android maka dia muncul 
tulisan android 

Tapi Ketika dijalankan ios maka muncul ios disini tidak dijalankan ios karena tidak 
mamakai ios 

Untuk adaptif bisa memkai 2 design kita bisa mendsign sebuah ios dan android 
dalam satu coding 

Jika ios design seperti ini dan android seperti ini 

Memakaisebuah adaptif 


Kita langsungke responsive dahulu disini 
Kita buat flutter baru bikin sama seprti ini 
Kali ini membhas mediaguery dan AspecRatio 
Sebelumnya kita buat dari bawah dahulu 
Kita hapus semua ini mengunakan dgn statefull kita buat stateless saja 
Disni kita pisahkan home nya material nya 
Kita buat stalesswidget 
stl tab kasih Home 
maka di akan menjadi layar kosong 
karna dia menreturn container maka dia hitam 
return Scaffold( 

appbar: , 
) 
Untuk appbar bisa secara terpisah 
Diatas 
AppBar myAppbar = Appbar( 

Tittle : text( “Responsive” ), 
); 
Maka di appbar scaffold kasih 
Appbar: myAppbar; 
Maka sudah jadi sudah ada appbar secara terpisah 
Kemudian body: 
Kasih center dahulu ( 
Child: text(“data); 
) 
Jadi untuk mediaquery untuk mengambil tinggi dan lebar device user 
Mediaquery untuk mendapatkan sebuah nilai dari ukuran hp 
Untuk mengambil nya caranya buat varibel dahulu bentuknya double jgn lupa kasih 
final 


Final double heightDevice = MediaQuery.of(context).size.height; 

Maka sudah dapt height nya lalu coba kita tampilkan ke text 
Text(heightdevice.toString()), maka sudah dapat tinggi 

Tinggi dari mana dari atas sampai kebawh ini adalah tinggi device kita 
Masing2 hp berbeda maka kita ambil sesuai layar user 

Untuk design tidak memakai semuanya termasuk notfikasi kita tdak pakai 
Makai dari bawah appbar sampai bawah 


Appbar tidak dihitung dan pony nya tidak kita pakai 

Yg kita hitung ini dari pony atas sampai bawah semua layar 

Tapi kita mengambil body nya saja 

Kita buat lagi 

Final double bodyApp = heightDevice - myAppbar.preferredSize.height - 
mediaguery.of(context).padding.top: 

Cara nya bagaimana 

heightDevive lalu di ambil tinggi appbar cara myAppbar.prefferd.height: 
tetapi pony belum diambil bagaimana cara ambil pony 
mediaguery.of(context).padding.top pony Namanya padding top 

maka suadh dpt body app nya 

ganti (bodyApp) maka sudah dapat nilainya 

Ketika sudah dapt nilai nya kita memakai body app untuk ukuran aplikasi kita 
Untuk body ganti column 

Body : columnf) 

Mempunyai container membuat sebuah layout aplikasi 

Sebagian misalkan 

Di atas paragraph 

Tengah paragraph 

Ketiga scroll atau sebuah list 

Container( 

Height: bodyApp “ 0.3, berarti 3% 

Kita lupa membuat lebar atau width nya 


Buat juga 

Final double widthDevice = sama dgn height tingal ganti width 
Lalu ke container 

Width: widthDevice, 

Color: colors.amber, 

Maka sudah jadi sperti mempertika dari bodyApp 

Maka bisa memnetukan design kita atau konten kitab oleh sampai bawah 
Jika sampai bawah tingal kasih bodyApp saja 

Jika pertiga bodyApp “ 0.3 

Kemudain yg kedua 

Buat juga container 

Ganti warna colors.red 

Ini kan 0.3 + 0.3 = 0.6 sisanya berarti 40 % 0.4 maka jadi full 
0.4 % membuat listview 

Kasih 

Child: ListView() 

scrollDirection: Axis.horizontal, scroll samping 

kemudian 

kita membuat seperti sebuah card misal banyak gambar 
maka kita kasih child nya 

AspectRatio(aspectRatio: aspectRatio) seperti perbandingan tinggi dan lebar 
Kita buat listView itu container 

Aspectratio untuk perbandingan 4/6 yaitu tinggi 4 lebar 6, 


Kasih contaiener(color: colors.blue) 

Jadi perbandingan 4lebar 6 tinggi 

Kalau memakai pixel misal ganti container tinggi 50 lebar 60 maka tinggi hp itu 
berbeda 

Ukuran layar berbeda agar responsive kita bisa memakai ratio misalkan deviice 
lebar 

Maka tetap 4 banding 6 jika pakai pixel itu tidak responsive 

Ini aspecratio buat perbandingan antara height dan width kemudian 

Container luar ratio kasih padding sebesar : egdelnsert.all(20), 

Lalu aspecratio tinggal copy ganti warna nya menjadi 4 

Maka sudah jadi list nya 

Jika hp kecil tetap 4 / 6 

Sudah membahas ratio dan mediaguery 

Responsive 

Kasih margin pada aspecration : edgelnserts.oly(right:20), 

Kita kasih setiap ratio container 

Maka sudah rapih 


Sudah membahas responsive 

Kemudian membhas adaptif 

Menentukan design apa kah itu untuk android dan ios 
Membahas simple 

Misal 

Untuk container merah kasih 

Alignment: aligntment.center 

Jadi untuk adaptif sangat simple 

Child: , dia memakai sebuah widget 

Platform. Ini mempunyai property linux ios android dll 
Jadi platform.android apay g ditampilkan maka dia true 
Jika android saya tampilan text( “android” ) 
Platform.isAndroid ? Text( “Android”) : Text( “los”) 

Jika bukan android jadi IOS 

Maka munculnya android karna mengunakan android 
Jika pakai ios pasti muncul ios 

Untuk adaptif hanya simple ini bikin isAndroid islos 
Kita membuat adaptif sepeti ini saja cukup sekian 
Belajar android dan adaptif 


Minggu depan bikin aplikasi begitu complex 


